<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	<script type="text/javascript">

jsonToString = function(obj) {
    var THIS = this;
    switch (typeof (obj)) {
		case 'boolean':
			return obj;
        case 'string':
            return '"' + obj.replace(/(["\\])/g, '\\$1') + '"';
        case 'array':
            return '[' + obj.map(THIS.jsonToString).join(',') + ']';
        case 'object':
            if (obj instanceof Array) {
                var strArr = [];
                var len = obj.length;
                for (var i = 0; i < len; i++) {
                    strArr.push(THIS.jsonToString(obj[i]));
                }
                return '[' + strArr.join(',') + ']';
            }
            else
                if (obj == null) {
                return 'null';

            }
            else {
                var string = [];
                for (var property in obj)
                    string.push(THIS.jsonToString(property) + ':' + THIS.jsonToString(obj[property]));
                return '{' + string.join(',') + '}';
            }
        case 'number':
            return obj;
        case false:
            return obj;
    }
}
	
	
	isOrgEnd = false;
	//设置一层下的子节点为指定状态
	function setTreeChidCheck(treeData, check)
	{
		 for (var key = 0; key < treeData.length; key++) 
		 {
		 	treeData[key].isChecked = check;
		 	if (treeData[key].children.length > 0) 
			{
				//递归查找
                setTreeChidCheck(treeData[key].children, check);
            }//end if 2end
		 }
	}
	//根据需要设置指定ID的数据节点为指定状态
	
	/**
	 * 设置树节点数据设置为选中
	 * @param {Object} treeData 树节点数据
	 * @param {Object} id 指定的ID
	 * @param {Object} check 选择状态 true 或 false
	 * @param {Object} isOnlyID 是否只选择此ID，不进行字节点的选中
	 */
    function setTreeDataCheck(treeData, id, check, isOnlyID)
	{
		if(isOrgEnd)
			return;
		//遍历树节点
        for (var key = 0; key < treeData.length; key++) 
		{
			//对比ID
			if(id == treeData[key].id )
			{			
				//设置选定状态为指定状态
				treeData[key].isChecked = check;
				//不便利子节点直接完成
				if(isOnlyID)
					return;
				
				if (treeData[key].children.length > 0) 
				{
					//递归设置子节点为指定状体1
	                setTreeChidCheck(treeData[key].children, check);
	            }//end if 2end
				isOrgEnd = true;
				
				return;
			}//					
            if (treeData[key].children.length > 0) 
			{
				//递归查找
                setTreeDataCheck(treeData[key].children, id, check);
            }//end if 2end
        }//end for level1
		
		isOrgEnd = false;
    }//end function

		
	//设置树指定的ID为选中
	function setIdsCheck(tree, treeData, ids)
	{
	    var node;
	    var tmp;
	    var chid;
		//遍历ID查找并设置
	    for(var iter = 0; iter < ids.length; iter++)
	    {
			//查找到指定的节点
	        node = tree.find("div[node-id='"+ ids[iter] +"']");
	        tmp = node.children(".tree-checkbox");
	        //删除选中状态0
	        tmp.removeClass("tree-checkbox0");
	        //选择状态为1
	        tmp.addClass("tree-checkbox1");
	        //根据树节点类型设置不同的选择状态
	        if(node.children(".tree-icon").hasClass("tree-folder"))
	        {
	           child = node.next("ul").find(".tree-checkbox");
	           child.removeClass("tree-checkbox0");
	           child.addClass("tree-checkbox1");
	        }//end add child
			
			setTreeDataCheck(treeData, ids[iter], true);
	    }//end for
	}//end setIdsCheck
	
	
	//获取存在子节点被选中，当未被选完的父节点
	function getRootIsCheck(tree)
	{
		var nodes = [];
		$(tree).find('.tree-checkbox2').each(function(){
			var node = $(this).parent();
			nodes.push(node.attr('node-id'));
			//nodes.push($(this).next().html());
		});		
		return nodes;
	}
	
		var treeData;
		$(function(){
			
			var str = '/Date(1281784451000+0800)/';
			alert(str.search(/\/Date/) );			
			
//			var t = [{"id":"23", "ischeck":false, "chid":[{ "id":"12", "ischeck":false, "chid":[{ "id":"3721", "ischeck":false, "chid":[] }] }] },{ "id":"40", "ischeck":true, "chid":[]}];
//			
//			
//			alert(jsonToString(t));
//			setTreeDataCheck(t, '12', true);			
//			alert(jsonToString(t));
			
			//alert(t[0].chid[0].ischeck);
			
			
//			var ts = [{"isend" : true}];
//			var isk = true;
//			alert(typeof( isk ));
//			alert(typeof(ts[0].isend));
//			alert( jsonToString(ts) );
//			
			
			
			
			$('#tt2').tree({
				
				 
//var s = [{"children":[{"children":null,"id":"AC#1#1","text":"下级"}],"id":"AC#1","text":"什么东西"}];
				checkbox: true,
				url: 'tree_data.json',
				onClick:function(node){
					$(this).tree('toggle', node.target);
					//alert('you dbclick '+node.text);
				},
				onLoadSuccess : function(node, data)
				{
					if(data.length > 0)
					{
						treeData = data;
					}
					//alert(setTreeDataCheck(data, '12', true));
				},
				onCheck : function(node, checked)
				{		
					alert(checked);
					setTreeDataCheck(treeData, node.id, checked);
//					var children = $('#tt2').tree('getChildren', node.target);
//					//
//					for(var i=0; i<children.length; i++){
//						setTreeDataCheck(treeData, children[i].id, checked);
//					}//end change tree check state		
				}//end check
			});//end init tree
			
			
//			$('#tt2').find(".tree-title").click(function(){
//				
//				var node = $('#tt2').tree('getSelected');
//				alert(node.text);
//				alert(node.id);
//			});
			
		});
		
		function currentTreeData()
		{
			$('#v').val(jsonToString(treeData));
		}
		
		function setCheck()
		{
			ids= ["28ae8474-1ed2-4b21-b1e8-edae59a69298",
			"901fe013-ea6b-4158-89ce-55d3dcb27615","94db1cbf-a5ac-432d-a3c8-6d1674649ffb"];
			setIdsCheck($('#tt2'), treeData , ids);
		}
		
		function reload(){
			$('#tt2').tree('reload');
		}
		function getChildren(){
			var node = $('#tt2').tree('getSelected');
			if (node){
				var children = $('#tt2').tree('getChildren', node.target);
			} else {
				var children = $('#tt2').tree('getChildren');
			}
			var s = '';
			for(var i=0; i<children.length; i++){
				s += children[i].text + ',';
			}
			alert(s);
		}
		function getChecked(){
			var nodes = $('#tt2').tree('getChecked');
			var s = '';
			for(var i=0; i<nodes.length; i++){
				if (s != '') s += ',';
				s += nodes[i].text;
			}
			alert(s);
		}
		function getSelected(){
			var node = $('#tt2').tree('getSelected');
			alert(node.text);
		}
		function collapse(){
			var node = $('#tt2').tree('getSelected');
			$('#tt2').tree('collapse',node.target);
		}
		function expand(){
			var node = $('#tt2').tree('getSelected');
			$('#tt2').tree('expand',node.target);
		}
		function collapseAll(){
			$('#tt2').tree('collapseAll');
		}
		function expandAll(){
			$('#tt2').tree('expandAll');
		}
		function append(){
			var node = $('#tt2').tree('getSelected');
			$('#tt2').tree('append',{
				parent: (node?node.target:null),
				data:[{
					text:'new1',
					checked:true
				},{
					text:'new2',
					state:'closed',
					children:[{
						text:'subnew1'
					},{
						text:'subnew2'
					}]
				}]
			});
		}
		function remove(){
			var node = $('#tt2').tree('getSelected');
			$('#tt2').tree('remove', node.target);
		}
		function update(){
			var node = $('#tt2').tree('getSelected');
			if (node){
				node.text = '<span style="font-weight:bold">new text</span>';
				node.iconCls = 'icon-save';
				$('#tt2').tree('update', node);
			}
		}
		function isLeaf(){
			var node = $('#tt2').tree('getSelected');
			var b = $('#tt2').tree('isLeaf', node.target);
			alert(b)
		}
		
		function getZZ()
		{
			alert(getRootIsCheck('#tt2'));
		}
	</script>
</head>
<body>
	<h1>Tree</h1>
	<p>Create from HTML markup</p>
	<ul id="tt1" class="easyui-tree" animate="true">
		<li>
			<span>Folder</span>
			<ul>
				<li state="closed">
					<span>Sub Folder 1</span>
					<ul>
						<li>
							<span><a href="#">File 11</a></span>
						</li>
						<li>
							<span>File 12</span>
						</li>
						<li>
							<span>File 13</span>
						</li>
					</ul>
				</li>
				<li>
					<span>File 2</span>
				</li>
				<li>
					<span>File 3</span>
				</li>
				<li>File 4</li>
				<li>File 5</li>
			</ul>
		</li>
		<li>
			<span>File21</span>
		</li>
	</ul>
	<hr></hr>
	<p>Create from JSON data</p>
	<div style="margin:10px;">
		<a href="#" onclick="reload()">reload</a>
		<a href="#" onclick="getChildren()">getChildren</a>
		<a href="#" onclick="getChecked()">getChecked</a>
		<a href="#" onclick="getSelected()">getSelected</a>
		<a href="#" onclick="collapse()">collapse</a>
		<a href="#" onclick="expand()">expand</a>
		<a href="#" onclick="collapseAll()">collapseAll</a>
		<a href="#" onclick="expandAll()">expandAll</a>
		<a href="#" onclick="append()">append</a>
		<a href="#" onclick="remove()">remove</a>
		<a href="#" onclick="update()">update</a>
		<a href="#" onclick="isLeaf()">isLeaf</a>
	</div>
	
	<a href="#" onclick="currentTreeData()">Current Tree Data</a>
	<a href="#" onclick="setCheck()">setCheck</a>
	<a href="#" onclick="getZZ()">getZZ</a>
	

	<ul id="tt2"></ul>
	<textarea id="v" style="width:200px; height:200px;"></textarea>
</body>
</html>